import { MenuOutlined } from "@ant-design/icons";
import { ProFormDependency, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProForm } from "@ant-design/pro-components";
import { SpecificationValueType } from "common/utils/data";
import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from '@dnd-kit/utilities';

export default function SpecificationItem({
  uuid,
                                            presetSpecifications,
                                          }: {
  uuid: string;
  presetSpecifications: API.SpecificationAllResult[];
}){
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: uuid,
  });

  return <div ref={setNodeRef} style={{
    transform: CSS.Transform.toString(transform),
    transition,
  }} >
    <ProFormGroup>
      <MenuOutlined
        className="cursor-move ml-[4px]"
        style={{transform: 'translateY(8px)', fontSize: 16}}
        {...attributes}
        {...listeners}
      />
      <ProFormSelect
        rules={[{required: true,message: '请填写'}]}
        fieldProps={{
          showSearch: true,
          optionFilterProp: 'label',
        }}
        width={200}
        placeholder="规格项"
        options={presetSpecifications?.map(item=>{
          return {
            label: item.name,
            value: item.uuid,
          }
        })}
        name="specificationUuid"
      />
      <ProFormDependency name={['specificationUuid']}>
        {({ specificationUuid }) => {
          if (!specificationUuid) {
            return (
              <span
                style={{
                  lineHeight: '32px',
                }}
              >
                        选择规格项后填写
                  </span>
            );
          }
          const commonProps = {
            placeholder: '规格值',
            name: 'value',
            width: 200,
          }
          const specification = presetSpecifications?.find(item=>item.uuid === specificationUuid);
          const specificationValueType = specification?.valueType;
          if(specificationValueType === SpecificationValueType.TEXT) {
            return <ProFormText
              {...commonProps}
              rules={[{required: true,message: '请填写'}]}
            />;
          }
          if(specificationValueType === SpecificationValueType.NUMBER) {
            return <ProFormDigit
              {...commonProps}
              rules={[{required: true,message: '请填写'}]}
            />;
          }
          if(specificationValueType === SpecificationValueType.SELECT) {
            return <ProFormSelect
              {...commonProps}
              options={specification?.extra?.options}
              mode={specification?.extra?.multiple ? 'multiple' : undefined}
              showSearch={false}
              rules={[{required: true,message: '请选择', type: specification?.extra?.multiple ?'array' : undefined}]}
            />;
          }
          return  <></>
        }}
      </ProFormDependency>
  </ProFormGroup>
  </div>
}
